<!DOCTYPE html>
<html lang="en">
<head>
  <title>Aspect Ratio with Preview Pane | Jcrop Demo</title>
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />

<script src="Jcrop-0.9.12/js/jquery.min.js"></script>
<script src="Jcrop-0.9.12/js/jquery.Jcrop.js"></script>
<script src="Jcrop-0.9.12/js/imgCropUpload.js"></script>
<script src="layui-v2.5.6/layui/layui.all.js"></script>

<link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css" type="text/css">
<link rel="stylesheet" href="Jcrop-0.9.12/css/jquery.Jcrop.css" type="text/css" />
 <style type="text/css">
        body {
            font-size: 16px;
            font-family:"Microsoft YaHei",Arial, Helvetica, sans-serif
        }
        *,
        *:before,
        *:after {
            -webkit-box-sizing: border-box;
               -moz-box-sizing: border-box;
                -ms-box-sizing: border-box;
                    box-sizing: border-box;
        }

        .crop-picker-wrap {
            position: relative;
            width: 100px;
            height: 30px;
            overflow: hidden;
        }
        .crop-picker {
            width: 100%;
            height: 100%;
            line-height: 1;

            -webkit-appearance: none;
            margin: 0;
            border: none;
            border-radius: 5px;
            padding: 9px 0;
            background-color: #1ab2ff;

            color: #fff;            
            cursor: pointer;
        }
        .crop-picker-file {
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            opacity: 0;
            cursor: pointer;
            filter: alpha(opacity=0);
        }

        .crop-wrapper {
            display: inline-block;
            min-width: 750px;
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0 0 5px 2px #ccc;
        }

        .crop-container {
            font-size: 0;
        }

        .crop-container img[src=""] {
            visibility: hidden;
        }

        .crop-area-wrapper,
        .crop-preview-wrapper {
            display: inline-block;
            vertical-align: top;
        }
        .crop-area-wrapper {
            width: 500px;
            height: 400px;
        }
        .crop-preview-wrapper {
            width: 200px;
            height: 200px;
            margin-left: 28px;
            overflow: hidden;
        }
        .crop-preview-container {
            position: relative;
            overflow: hidden;
        }
        .crop-operate {
            text-align: center;
            margin: 10px 0;
        }
        .crop-save,
        .crop-cancel {
            display: inline-block;
            vertical-align: middle;

            width: 150px;
            height: 50px;
            line-height: 50px;

            -webkit-appearance: none;
            margin: 0 5px;
            border: none;
            border-radius: 5px;
            background-color: #1ab2ff;

            color: #fff;
            cursor: pointer;
        }
        #uploadIfr {
            display: none;
        }
    </style>

</head>
<body>

	<form id="coords"
	    class="coords"
	    onsubmit="return false;"
	    action="">
	
	    <div class="inline-labels">
	    <label>X1 <input type="text" size="4" id="x1" name="x1" /></label>
	    <label>Y1 <input type="text" size="4" id="y1" name="y1" /></label>
	    <label>X2 <input type="text" size="4" id="x2" name="x2" /></label>
	    <label>Y2 <input type="text" size="4" id="y2" name="y2" /></label>
	    <label>W <input type="text" size="4" id="w" name="w" /></label>
	    <label>H <input type="text" size="4" id="h" name="h" /></label>
	    </div>
	  </form>
	
	
    <div id="TCrop"></div>
    <button id="btn">上传头像</button>
    <script type="text/javascript">
    var layer;
    $(function()
    {
    	layui.use(['layer'], function(){
    		  var laypage = layui.layer;
    		});
     })
     
        $(function() {
            Crop.init({
                id: 'TCrop',
                /* 上传路径 */
                url: '/uploadFile',
                /* 允许上传的图片的后缀 */
                allowsuf: ['jpg', 'jpeg', 'png', 'gif'],
                /* JCrop参数设置 */
                cropParam: {
                    minSize: [100, 100],          // 选框最小尺寸
                    maxSize: [300, 300],        // 选框最大尺寸
                    allowSelect: true,          // 允许新选框
                    allowMove: true,            // 允许选框移动
                    allowResize: true,          // 允许选框缩放
                    dragEdges: true,            // 允许拖动边框
                    onChange: function(c) {
                    	$('#x1').val(c.x);
					    $('#y1').val(c.y);
					    $('#x2').val(c.x2);
					    $('#y2').val(c.y2);
					    $('#w').val(c.w);
					    $('#h').val(c.h);
                    },   // 选框改变时的事件，参数c={x, y, x1, y1, w, h}
                    onSelect: function(c) {
                    	 $('#x1').val(c.x);
					    $('#y1').val(c.y);
					    $('#x2').val(c.x2);
					    $('#y2').val(c.y2);
					    $('#w').val(c.w);
					    $('#h').val(c.h);
                    	
                    }    // 选框选定时的事件，参数c={x, y, x1, y1, w, h}
                },
                /* 是否进行裁剪，不裁剪则按原图上传，默认进行裁剪 */
                isCrop: true,
                /* 图片上传完成之后的回调，无论是否成功上传 */
                onComplete: function(data) {
                    console.log('upload complete!');
                }
            });
        });

        /* 上传头像 */
        $(function(){
            $("#btn").click(function(){
            var form = document.getElementById("coords");//获取到form表单
                var formData = new FormData(form);//创建一个formData对象,将表单中的数据放进去
                //for(var i=0; i<$('#file')[0].files.length;i++){//使用for循环将选择的文件一个一个添加(append)到formData对象中
                    formData.append('img0', $('#file')[0].files[0]);//注意:如果你使用的是jfinal框架这里的key(img)必须是不同的,如果相同的话文件能上传但是拿上传文件名的时候只能拿到一个
                //}
                   var x1 = $('#x1').val(),
                    x2 = $('#x2').val(),
                    y1 = $('#y1').val(),
                    y2 = $('#y2').val();
                    formData.append('x11',x1 );
                    formData.append('y11',y1 );
                    formData.append('x22',x2 );
                    formData.append('y22',y2 );
                    formData.append('tw',$(".jcrop-holder").css("width") );
                    formData.append('ty',$(".jcrop-holder").css("height") );
                $.ajax({//ajax
                    url: "/uploadFile",
                    type: "POST",
                    processData : false,//不处理数据,必须为false
                    contentType : false,//不设置内容类型,必须为false
                    data: formData,
                    dataType:"json",
                    success: function(data){
                   		 layer.msg(data);
                   		 setTimeout(" window.close();",1500);
                  		 console.log("msg",data);
                    },
                    error:function(e){
                   		 console.log("msg","ajax调用出现错误");
                    }
                    
                });
             });
        });
    </script>   
</body>
</html>

